<template>
  <Card title="传感器绑定到测点" v-bind="$attrs">
    <Form layout="vertical">
      <div v-for="measurePoint in measurePointList" :key="measurePoint.measurePointIndex"
        style="border: 2px dashed lightblue; margin: 5px 0; padding: 5px 10px">
        <FormItem :label="measurePoint.measurePointName + '传感器SN'">
          <Select v-model:value="measurePoint.deviceSN" placeholder="请选择传感器">
            <SelectOption v-for="sensor in sensorList" :key="sensor.deviceSN" :value="sensor.deviceSN" allowClear>{{
              sensor.deviceSN }}</SelectOption>
          </Select>
        </FormItem>
        <FormItem>
          <Button class="button-margin" type="primary" @click="editMeasure(measurePoint)">
            保存修改
          </Button>
        </FormItem>
      </div>
    </Form>
  </Card>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Card, Select, SelectOption, Form, FormItem, Button } from 'ant-design-vue'
import { MeasurePoint } from '/@/api/measurePoint/model/measurePoint'
import { useMessage } from '/@/hooks/web/useMessage'
import {
  ListApi as ListMeasurePointApi,
  EditApi as EditMeasureApi,
} from '/@/api/measurePoint/measurePoint'

import { ListApi as ListSensorApi } from '/@/api/sensor/sensor'
import { Sensor } from '/@/api/sensor/model/sensor'
import { useRouter } from 'vue-router'
const router = useRouter()
const { createSuccessModal } = useMessage()

const allMeasurePointList = ref<Array<MeasurePoint>>([])
const measurePointList = ref<Array<MeasurePoint>>([])
const deviceSN = ref<any>()
const machineId = ref<any>()
const listMeasurePoint = async () => {
  machineId.value = router.currentRoute.value.params.machineId
  allMeasurePointList.value = await ListMeasurePointApi()
  measurePointList.value = allMeasurePointList.value.filter((item) => item.machineId == machineId.value)
}

const allSourceList = ref<Array<Sensor>>([])
const sensorList = ref<Array<Sensor>>([])
const listSensor = async () => {
  deviceSN.value = router.currentRoute.value.params.deviceSN
  allSourceList.value = await ListSensorApi()
  sensorList.value = allSourceList.value.filter((item) => item.parentId === deviceSN.value)
}

const editMeasure = async (measurePoint: MeasurePoint) => {
  EditMeasureApi(measurePoint).then(() => {
    createSuccessModal({ title: '保存成功' })
  })
}
onMounted(() => {
  listSensor()
  listMeasurePoint()
})
</script>

<style lang="less" scoped>
.button-margin {
  margin: 0 0 0 0.5rem;
}
</style>
